理解闭包

欢迎移步我的博客阅读：《理解闭包》

闭包 是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。“闭包” 一词来源于以下两者的结合：要执行的代码块（由于自由变量被包含在代码块中，这些自由变量以及它们引用的对象没有被释放）和为自由变量提供绑定的计算环境（作用域）。

作用域

闭包的一个重点在于作用域，在 JavaScript 中变量的作用域分两种：全局变量与局部变量，首先让我们来了解一下：

var _global = 1;  // 全局变量

function print() {
  var _internal = 2;  // 局部变量

  console.log(_global); // 1
  console.log(_internal); // 2
  return _internal;
}

print();
console.log(_global); // 1
console.log(_internal); // ReferenceError: _internal is not defined

此时我们可以看到，在函数内部是可以直接读取全局变量的。但当我们在外部想访问内部变量时，就会报错，因为在函数体外部时无法访问函数内部的变量的。

需要注意的是，当在函数内部定义变量时没用使用 var 等声明变量，那么它实际上会成为一个全局变量：

function print() {
  _internal = 2;
}

console.log(_internal); // 2

从内存中解释，变量的声明都存在栈中，而在 JavaScript 中存在垃圾回收机制（garbage collection），当一个函数执行完返回之后，它的内存会被自动回收，此时函数内部的变量都会被销毁。

那么我们有什么方法可以保存这一内存，并且在外部访问函数内部的变量呢 —— 闭包。

闭包

在正常情况下，我们在外部时无法修改函数内部变量的值：

// 场景 1
function print(x) {
  var _internal = 1;

  console.log(_internal + 1);
}

print(1); // 2
// ...
print(1); // 2

我们可以看到，无论 print() 调用多少次，打印的值都是 2，_internal 的值都是 1。

这是因为 JavaScript 中的垃圾回收机制，在多次调用 print() 时，每一次都需要回收前一次的内存，之后再次申请新内存，因此 _internal 无法在内存中继续保存。

换而言之，在每次调用 print() 时都需要为其和内部的变量申请新的内存空间，第一次 _internal 的内存地址可能为 0x...1，在函数调用完成之后，这块内存将被释放，再次调用时 _internal 的内存地址可能就是 0x...2 了。因此它无法再内存中被保存下来。

那么我们需要在外部使用函数内部的变量时，就需要在函数内部再声明一个函数，并将其返回：

function print() {
  var _internal = 1;

  return function log() {
    console.log(_internal);
  }
}

var test = print();
test(); // 1

此时，我们已经可以从外部访问 print() 函数内部的变量了。

当我们需要对 print() 函数内部的 _internal 的值进行修改时，我们可以给它另外一个函数：

// 场景 2
var add;
function print() {
  var _internal = 1;

  add = function(x) {
    _internal += x;
  }

  return function log() {
    console.log(_internal);
  }
}

var test = print();
test(); // 1
add(1);
test(); // 2

经过上述可以看出，函数 print() 在经过 add() 运行之后，_internal 的值分别为 1 和 2，这就说明了 _internal 始终保存在内存中，并没有在 var test = print(); 调用时被回收。

这是因为 print() 内的 log() 作为返回值，被赋给 test 这个全局变量，因此 log() 始终在内存中。而 log() 依赖 print() 并且可以访问 _internal，所以 print() 也始终在内存中，而且在 var test = print(); 调用时没有被回收。

换而言之，当 _internal 在声明的时候分配了内存，我们可以将其内存地址表示为 0x...1，在 print() 函数被调用之后应该会被回收，但是由于上述原因，没有被回收，它的值将继续保留在地址为 0x...1 中。在外部可以使用指针去寻址，并取得其值。

其他例子

在循环体中，我们可能遇到：

function loopA() {
  var arr = [];

  for(var i = 0; i < 10; i++) {
    arr[i] = function() {
      return i;
    }
  }

  return arr;
}

var test = loopA();
test[0]();  // 10
test[1]();  // 10
// ...
test[9]();  // 10

在上述例子中，我们需要他们执行不同的参数得到不同的值。但是一共创建了 10 次匿名函数，，他们都是共享同一个环境的。在匿名函数执行之前，循环早已完成，此时的匿名函数一局指向循环体中的最后一个值了。

• 解决方案 1：
  在 es6 中我们可以使用 let 声明：

  function loopA() {
    var arr = [];
  
    for(let i = 0; i < 10; i++) {
      arr[i] = function() {
        return i;
      }
    }
  
    return arr;
  }
  
  var test = loopA();
  test[0]();  // 0
  test[1]();  // 1
  // ...
  test[9]();  // 9

• 解决方案 2：
  将函数声明放在循环体外部：

  function loopA() {
    var arr = [];
    var func = function(n) {
      return n;
    }
  
    for(var i = 0; i < 10; i++) {
      arr[i] = func(i)
    }
  
    return arr;
  }
  
  var test = loopA();
  test[0];  // 0
  test[1];  // 1
  test[9];  // 9

• 解决方案 3：

  function loopA() {
    var arr = [];
  
    for(var i = 0; i < 10; i++) {
      arr[i] = (function(i) {
        return i;
      })(i)
    }
  
    return arr;
  }
  
  var test = loopA();
  test[0];  // 0
  test[1];  // 1
  test[9];  // 9

• 其他解决方案请看参考

弊端

• 内存泄漏：由于闭包会使得函数内部的变量都被保存在内存中，不会被销毁，内存消耗很大。因此需要在退出函数之前，将不使用的变量都删除。

• 会修改函数内部变量的值。

总结

闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。
如果不是因为某些特殊任务而需要闭包，在没有必要的情况下，在其它函数中创建函数是不明智的，因为闭包对脚本性能具有负面影响，包括处理速度和内存消耗。

参考

百度百科 - 闭包
Wikipedia - Closure
学习 Javascript 闭包（Closure）
MDN - 闭包
深入理解闭包系列第二篇——从执行环境角度看闭包
深入理解闭包系列第四篇——常见的一个循环和闭包的错误详解
深入理解javascript原型和闭包（15）——闭包